/*
 * @Description: 雷达图
 * @Author: kanglin
 * @Date: 2018-09-07 14:26:24
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-radar-chart{
		height: 410 * @rem-per-px;
		padding: 42 * @rem-per-px 0 33* @rem-per-px;
    }
</style>

<template>
	<div
		ref="radar-chart"
		class="v-com-radar-chart"/>
</template>

<script>


// oli_data, moisture_data, sensitivity_data, pigment_data, cleanliness_data
import echarts from 'echarts';
import { $t } from 'src/locales/index';

const option = { // 配置模板
	color: ['rgba(255, 190, 214)'],
	title: {
		text: '',
	},
	// tooltip: {},
	radar: {
		indicator: [

		], // 名称
		center: ['50%', '50%'],
		radius: '60%',
		startAngle: 90,
		splitNumber: 5,
		shape: 'circle',
		name: {
			formatter: '{value}',
			textStyle: {
				color: '#333333',
			},
		},
		splitArea: {
			areaStyle: {
				color: [], // 背景颜色可以配置渐变
				shadowColor: 'rgba(0, 0, 0, 0.3)',

				shadowBlur: 10,
			},
		},
	},
	series: [
		{
			name: '雷达图',
			type: 'radar',
			data: [{
				value: [], // 配置数据
				areaStyle: {
					normal: {
						color: 'rgba(255,248,232,.8)',
					},
				},
			}],
		},
	],
};

export default {
	name: 'RadarChart',
	props: {
		data: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			radar_chart: null,
		};
	},
	watch: {
		data() {
			this.initChartData();
		},
	},
	mounted() {
		this.radar_chart = echarts.init(this.$refs['radar-chart']);
		this.initChartData();
	},
	beforeDestroy() {
		this.radar_chart.dispose();
	},
	methods: {

		/**
		 * 初始化雷达数据
		 * @return {undefined}
		 */
		initChartData() {
			if (this.data && this.data.length > 0) {
				const options = this.normalizeChartOptions(this.data);
				this.radar_chart.setOption(options);
			}
		},

		/**
         *  处理测试数据使得数据符合echart的配置
		 *  @param {array} data {雷达所需数据}
		 *  @return {array}
         */
		normalizeChartOptions(data) {
			const data_value = [];
			const indicator = [
				{ text: $t('report.oil_test'), max: 100 },
				{ text: $t('report.moisture_test'), max: 100 },
				{ text: $t('report.sensitivity'), max: 100 },
				{ text: $t('report.pigment'), max: 100 },
				{ text: $t('report.cleanliness'), max: 100 },
			];
			data.forEach((item, index) => {
				const value = item && item.value ? item.value : 0;
				data_value.push(value);
				indicator[index].text = `${indicator[index].text}\n(${value})`;
			});
			Object.assign(option.series[0].data[0].value, data_value);
			Object.assign(option.radar.indicator, indicator);
			return option;
		},
	},
};
</script>
